<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表达式小结</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      let msg = '金秀贤...';
      let obj = {
        name: 'rayChen',
        age: 33
      };

      //声明虚拟 DOM 对象
      /**
       * {} 中可以编写 JavaScript 表达式
       * {} 中不能编写 JS 语句 (条件语句if...else, switch), 循环语句 while  for  do..while
       */
      //字面量
      var vdom = <h2>{'i love you'}</h2>;
      // 变量
      var vdom = <h2>{msg}</h2>;
      // 对象属性
      var vdom = <h2>{obj.name}</h2>;
      // 运算
      var vdom = <h2>{'周杰伦要开演唱会啦' + '这个票是真的难抢啊'}</h2>;
      // 函数调用 
      var vdom = <h2>{obj.name.toUpperCase()}</h2>;

      /**
       * 哪些类型的数据, 最终会渲染到网页中
       * * 字符串
       * * 数字
       * * 虚拟 DOM 对象
       * * 数组
       * 
       * 数据类型
       * number, string, boolean, bigInt, symbol, object, undefined, null
       * 首字母
       * n  s  b   s  o  u   n
       * 去重
       * n s b o u 
       * 组合
       * usonb 
       */
      //undefined   ❌
      var vdom = <h2>{undefined}</h2>;
      //string      ✅
      var vdom = <h2>{'武侯祠堂常邻近，一体君臣祭祀同'}</h2>;
      //symbol      ❌
      var vdom = <h2>{Symbol()}</h2>;
      //object      ❌ 会报错哦
      // var vdom = <h2>{{a: 100}}</h2>;
      //number      ✅
      var vdom = <h2>{521}</h2>;
      var vdom = <h2>{0xfab}</h2>;// 0x 16 进制  0o  8进制  0b  二进制
      //null        ❌
      var vdom = <h2>{null}</h2>;
      //boolean     ❌
      var vdom = <h2>{true}</h2>;
      var vdom = <h2>{false}</h2>;
      //虚拟 DOM 对象✅
      var vdom = <h2>{<a href="http://www.bilibili.com">bilibili</a>}</h2>;
      var vdom = <h2><a href="http://www.bilibili.com">bilibili</a></h2>;
      //数组 array
      // var vdom = <h2>{[1,2,false,'abc',true, null, 'xyz', {a: 100}]}</h2>;
      // var vdom = <h2>{[1,2,3]}</h2>;
      var vdom = <h2>{'123'}</h2>;


      /**
       * 表单属性值使用插值表达式设置  
       * 1. undefined  null  false(true) 这几种情况, 最终不会在真实 DOM 产生新的属性
       * 2. 关于对象, 对象如果作为 React 的子元素是会报错, 但是作为元素的属性值是不会报错的
       */
      //undefined   ❌   该属性最终不会添加到真实 DOM 的身上
      var vdom = <h2 title={undefined}>测试</h2>; 
      //string      ✅ 
      var vdom = <h2 title={'i miss you'}>测试</h2>; 
      //symbol      ❌
      var vdom = <h2 title={Symbol()}>测试</h2>; 
      //object      ✅ 显示结果为 [object Object]
      var vdom = <h2 title={{a: 100}}>测试</h2>; 
      //number      ✅
      var vdom = <h2 title={9527}>测试</h2>; 
      //null        ❌
      var vdom = <h2 title={null}>测试</h2>; 
      //boolean     ❌
      var vdom = <h2 title={true}>测试</h2>; 
      var vdom = <h2 title={false}>测试</h2>; 
      //虚拟DOM对象  ✅ 显示结果为 [object Object]
      var vdom = <h2 title={<span>abc</span>}>测试</h2>; 
      //数组 array
      var vdom = <h2 title={[1,2,3,4]}>测试</h2>; 
      //样式
      var vdom = <h2 style={{color: '#ac9'}}>不要轻易的口出狂言，那样只会透露出你的软弱</h2>;

      //渲染
      ReactDOM.render(vdom, document.querySelector('#root'));

      // document.querySelector =>  dq
      // document.querySelectorAll => dqa
      var vdom = ReactDOM.render(vdom, document.querySelector('#root'));
    </script>
  </body>
</html>
